<template>
	<div class="scene-manager">
		<a-card class="new-scene-card" :body-style="{ padding: '15px' }" title="创建新场景">
			<a-form
				:model="newSceneForm"
				layout="horizontal"
				size="small"
				class="new-scene-form"
				:rules="{
          name: [{ required: true, message: '请输入场景名称' }]
        }"
			>
				<a-form-item label="名称" name="name">
					<a-input
						v-model:value="newSceneForm.name"
						placeholder="输入场景名称"
					/>
				</a-form-item>

				<a-form-item label="描述">
					<a-textarea
						v-model:value="newSceneForm.description"
						placeholder="输入场景描述（可选）"
						:rows="2"
					/>
				</a-form-item>

				<a-form-item>
					<a-button
						type="primary"
						@click="createNewScene"
						:disabled="!newSceneForm.name.trim()"
					>
						创建新场景
					</a-button>
				</a-form-item>
			</a-form>
		</a-card>

		<a-card class="saved-scenes-card" :body-style="{ padding: '15px', marginTop: '15px' }" title="已保存场景">
			<a-empty
				v-if="sceneStore.scenes.length === 0"
				description="暂无保存的场景"
				:image="aEmptyImages.default"
			/>

			<a-table
				v-else
				:data-source="sceneStore.scenes"
				bordered
				size="small"
				:columns="columns"
				:row-key="(record) => {return record.id}"
			/>
		</a-card>
	</div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {useSceneStore} from '@/store/modules/scene';
import {Empty, Modal} from 'ant-design-vue';

// 空状态图片
const aEmptyImages = Empty.PRESENTED_IMAGE;

// 场景状态
const sceneStore = useSceneStore();
// 新场景表单数据
const newSceneForm = ref({
	name: '',
	description: ''
});

// 表格列定义
const columns = [
	{
		title: '场景名称',
		dataIndex: 'name',
		width: 200,
	},
	{
		title: '描述',
		dataIndex: 'description',
		width: 200,
	},
	{
		title: '元素数量',
		width: 100,
		align: 'center',
		render: (text: any, record: any) => record.blocks.length
	},
	{
		title: '最后编辑',
		width: 160,
		render: (text: any, record: any) => new Date(record.updatedAt).toLocaleString()
	},
	{
		title: '操作',
		width: 100,
		align: 'center',
		// render: (text: any, record: any) => (
		// 	return `<div>123</div>`
		// )
	}
];

// 初始化场景存储
onMounted(() => {
	sceneStore.init();
});

// 创建新场景
const createNewScene = () => {
	if (newSceneForm.value.name.trim()) {
		sceneStore.createNewScene(
			newSceneForm.value.name.trim(),
			newSceneForm.value.description.trim()
		);
		newSceneForm.value = {
			name: '',
			description: ''
		};
	}
};

// 加载场景
const loadScene = (sceneId: string) => {
	sceneStore.loadScene(sceneId);
	// 关闭对话框（通过父组件）
	const emit = defineEmits(['close']);
	emit('close');
};

// 删除场景
const deleteScene = (sceneId: string, sceneName: string) => {
	Modal.confirm({
		title: '删除确认',
		content: `确定要删除场景"${sceneName}"吗？此操作不可撤销。`,
		okText: '确定',
		cancelText: '取消',
		onOk: () => {
			sceneStore.deleteScene(sceneId);
		}
	});
};

const emit = defineEmits(['close']);
</script>

<style scoped>
.scene-manager {
	max-height: 500px;
	overflow-y: auto;
	padding-right: 10px;
}

.new-scene-form {
	margin-top: 10px;
}
</style>
